<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    * { margin:0px; padding:0px; border-width:0px}
    
    body { padding:4px; /*height:100%;*/}
    
    .events { display:none }

    #main { width:504px; height:380px;  border-color:red }


    #me-head 
    {
      height: 38px; 
      width: 100%; 
      background-color: #3B5998; 
      color: #D8DFEA; 
      /*padding: 4px;*/
      font-size: 11px;
      font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    }

    #me-wrap
    {
      padding: 4px;
    }
    #me-picture
    {
      float:left;
    }
    #me-picture img
    {
      height: 31px;
      width: 31px;
    }
    #me-name
    {
      font-size: 13px;
      margin-left: 38px;
      padding-top:6px;
      font-weight: bold;
      cursor: pointer;
    }

    #me-name:hover 
    {
      color:White; 
    }

    /************************************/
    .main-menu
    {
      height: 32px;
    }
    
    #main-menu-underline
    {
      clear: left;
      height: 4px;
    }

    .menu-item
    {
       height: 24px;
       font-size: 13px;
       font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
       font-weight: bold;
       float: left;
       margin-top: 5px;
       padding-left: 10px;
       padding-right: 10px;
       cursor: pointer;
       color:#3B5998;
    }

    .menu-item:hover
    {
      text-decoration: underline;
      /*background-color:#3B5998; 
      color:#D8DFEA; */
    }

    .selected
    {
      background-color:#3B5998; 
      color:#D8DFEA; 
    }

    .selected:hover
    {
    }

    /* notifier **/

    #event-frame 
    { 
      width:100%; 
      height:64px; 
      border-color:black;
      background-image: url(http://comet2.lovesupport.ru/html/faceonline/arrow-left.jpg);
      background-position: left, right;
      background-repeat: repeat-x;
      overflow: hidden;
    }

    #notifier {
      width:200%; 
    }

  .messenger 
  {
    float:left;
    cursor:pointer;
    padding:3px;
    overflow: hidden;
    background-color:Cornsilk; 
    border-width:1px; 
    border-color:Brown;
    border-style:solid;
    
    width:192px;
    height: 56px;

    margin-left:6px;
  }

  .messenger:first-child
  {
    margin-left: 0px;
  }

  .messenger:hover *
  {
  }
  
  .XW
  {
    /*border-width: 1px;
    border-style: solid;
    border-color: Blue;*/
    height: 15px;
    width: 100%;
    position: relative;
    top:0px;
    left:0px;
    margin-top: -5px;
    margin-bottom: -10px;
    
    /*text-align: right;*/
    /*height: 15px;
    margin-bottom: 15px;*/
  }

  .XW:hover .X
  {
    visibility: visible;
  }

  .X
  {
    visibility: hidden;
    /*border-width: 1px;
    border-style: solid;
    border-color: Red;*/
    background-color: Yellow;
    height: 15px;
    width: 15px;
    position: relative;
    left: 100%;
    margin-left: -15px;
  }

  .head 
  {
    float:left; 
  }

  .body 
  {
    padding-left:54px;
  }

  .header 
  { 
    color:#3B5998;
    font-weight: bold;
    font-size: 13px;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
  }

  .action
  { 
    /*margin-left:3px;*/
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    font-style: italic;

  }

  .content 
  { 
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 12px;
  }

  .footer 
  {
  }


    /************************************/
    #me-frame { width:100%; height:64px; border-color:black }
    #control-frame { width:100%; height:64px; border-color:black }
    #common-frame { width:100%; height:100%; border-color:black }
  </style>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
  <script>
    // Авторизация через facebook.html
    if (window.location.hash.length == 0 )
    {
      window.location='https://www.facebook.com/dialog/oauth?client_id=369074116454755&redirect_uri='+window.location+'&response_type=token&scope=user_about_me,friends_about_me';
    }
    else
    {
      access_token= window.location.hash.substring(1);
    }
  </script>

  <script>
  Array.prototype.unique =
  function() {
    var a = [];
    var l = this.length;
    for(var i=0; i<l; i++) {
      for(var j=i+1; j<l; j++) {
        // If this[i] is found later in the array
        if (this[i] === this[j])
          j = ++i;
      }
      a.push(this[i]);
    }
    return a;
  };
  </script>

  <script src="./core/event.js"></script>
  <script src="./core/json2.js"></script>
  <script src="./core/comet.js"></script>
  <script src="./core/jquery-1.7.1.js"></script>
  <script src="./core/jquery.url.js"></script>

  <script src="./faceonline.js?zzz"></script>
  <script src="./facebook.js"></script>
  
  
<script>

function IamOnline()
{
  var channel = "faceonline.online." + model.me.id;
  comet.publish(
    {
      channel: channel,
      timelife: 20,
      limit: 1,
      content: { id:model.me.id, status:"online" }
    }
  );
}

function PublishSites() { try {

  var messages = [];
  for ( var i=0; i < incomeSites.length;  i++ )
  {
    var site = incomeSites[i];
    for ( var j=0; j < site.length;  j++ )
    {
      messages.push(
        {
          action: "modify",
          channel: "faceonline.whosonline." + site[i],
          cursor:1,
          lifetime: 60,
          limit: 101000,
          identity: site[i],
          content: "!content: " + site[i]
        }
      );
    }
  }

  if ( messages.length > 0 )
  {
    comet.publish(messages);
  }

} catch(e){ alert("MakeSiteArray catch: " + e.message );} };

/*
function CreateDomainsList(host, directory)
{
  var names = host.split('.');

  if ( names.length > 0 && names[0].substring(0, 3) == "www" )
    names.splice( 0, 1 );

  if ( names.length < 2 ) return names;

  var current = names[names.length - 1];
  var result = [];

  for (var i = names.length-2; i >= 0 ; --i)
  {
    current = names[i]+ "." + current;
    result.push(current);
  }
  
  var dirs = directory.split('/');

  for (var i = 0; i < dirs.length ; i++)
  {
    if ( !dirs[i] ) continue;
    current += "/" + dirs[i];
    result.push(current);
  }

  return result;
}

function CreateSiteObject(site) { try{
  
  try { var siteJ = $.url(site); } catch(e) { return null;}

  if ( siteJ.attr("protocol") == "http" || siteJ.attr("protocol") == "https" )
  {
    return {
      domains : CreateDomainsList( siteJ.attr("host"), siteJ.attr("directory") )
    };
  }
  return null;
} catch(e){ alert("CreateSiteObject catch: " + e.message + "\n" + site );} };
*/


function MakeSiteArray(url) { try {

  var old = url;
  var beg = url.indexOf("://");
  if ( beg == -1)  beg = 0; 
  else if ( beg > 3 && url.substring(0, 4) == "http" ) beg += 3;
  else {
    /*alert(beg + "\n" + url.substring(0, 4) + "\n" + url);*/
    return null;
  }

  var end = url.indexOf("?");
  var end2 = url.indexOf("#");

  if ( end==-1 || (end2!=-1 && end > end2) ) end=end2;

  url = (end!=-1) ? url.substring(beg, end) : url.substring(beg);

 
  // разбиваем что получилось 
  var pos = url.indexOf("/");
  var host = url.substring( 0, pos) ;
  var directory = pos==-1 ? "": url.substring(pos+1);

  var result = [];
  var hosts = host.split('.');
  
  if ( hosts.length > 1 && hosts[0].length < 5 && hosts[0].substring(0,3)=="www" ) 
    hosts.shift();
  
  if ( hosts.length < 2 ) 
    return null;

  current =  hosts[hosts.length-1];
  for (var i=hosts.length-2; i>=0; i--)
  {
    current = hosts[i] + "." + current;
    result.push(current.toLowerCase());
  }

  //alert("PRE directory: " + directory);
  if ( directory )
  {
    var dirs = directory.split('/');
    for ( var i=0; i < dirs.length; ++i ) if ( dirs[i] )
    {
      current += "/" + dirs[i];
      result.push(current.toLowerCase());
    }
  }
  
  return result;

} catch(e){ alert("MakeSiteArray catch: " + e.message );} };

function MergeSiteArray(sites) { try {

  if ( sites.length < 2 )
    return sites;

  var result = [];

  for (var i = 0; i < sites.length - 1; ++i)
  {
    if (!sites[i]) continue;
    for ( var j = i + 1; j < sites.length; ++j)
    {
      if (!sites[j]) continue;
      if ( sites[i][0] == sites[j][0])
      {
        sites[i] = sites[i].concat(sites[j]);
        sites[j] = null;
      }
    }
    result.push( sites[i].sort().unique() );
  }

  return result;
} catch(e){ alert("MergeSiteArray catch: " + e.message );} };

function SetSites(sites)
{
  // alert("sites: " + sites.length);
  incomeSites = [];
  
  for (var i=0; i < sites.length; ++i)
  {
    var siteArray = MakeSiteArray(sites[i]);
    if ( siteArray )
      incomeSites.push(siteArray);

    /*var siteObject = CreateSiteObject(sites[i]);
    if (siteObject)
    {
      alert(JSON.stringify(siteObject) );
      incomeSites.push(siteObject);
    }*/
  }

  incomeSites = MergeSiteArray( incomeSites );
  /*alert(":::" +   JSON.stringify( incomeSites) );*/
 
}

function OnLoad()
{
  if (access_token)
  {
    try
    {
      initialize();

      /*document.getElementById("me-frame").setAttribute("src", "me.html");*/
      /*document.getElementById("control-frame").setAttribute("src", "control.html");*/
      document.getElementById("common-frame").setAttribute("src", "common.html");
      /*document.getElementById("event-frame").setAttribute("src", "notifier.html");*/

      
      
      acc.me.get( function(me){

        if (me.name)
        {
          document.getElementById("me-name").innerHTML = me.name;
        }

        if ( me.picture )
        {
          var img = document.createElement("img");
          img.setAttribute("src", me.picture);
          document.getElementById("me-picture").appendChild(img);
        }

        IamOnline();
        setInterval( IamOnline, 15000 );

      });

      acc.me.get( CallbackNotify );

      Event.add( document.getElementById("menu-item-online"), "click", function() { SelectMenuItem(this.getAttribute("id")); launcher.execCommon("whosonline"); } );
      Event.add( document.getElementById("menu-item-friends"), "click", function() { SelectMenuItem(this.getAttribute("id")); launcher.execCommon("friend-list"); } );
      Event.add( document.getElementById("menu-item-contacts"), "click", function() { SelectMenuItem(this.getAttribute("id")) } );
      Event.add( document.getElementById("menu-item-chats"), "click", function() { SelectMenuItem(this.getAttribute("id")) } );
      Event.add( document.getElementById("menu-item-events"), "click", function() { SelectMenuItem(this.getAttribute("id")) } );
      Event.add( document.getElementById("menu-item-more"), "click", function() { SelectMenuItem(this.getAttribute("id")) } );

      
      document.getElementById('event-income-sites').addEventListener('eventSiteList', function() {
        var eventData = document.getElementById('event-income-sites').innerText;
        SetSites( JSON.parse(eventData) );
        PublishSites();
      });
      

    }
    catch(e)
    {
      alert(e.message);
    }
  }
  else
  {
    // TODO: редирект на страницу ошибки
  }
}

function OnClose()
{
  alert("OnClose()");
}

function UnSelectMenu() { try {
  document.getElementById("main-menu-underline").setAttribute("class", "");
  var selectedId = document.getElementById("main-menu").selectedId;
  if ( selectedId )
  {
    var cls = document.getElementById(selectedId).getAttribute("class");
    cls = cls.replace(" selected", "");
    document.getElementById(selectedId).setAttribute("class", cls);
    document.getElementById("main-menu").selectedId = null;
  }
} catch(e){ alert(e.message); } }

function SelectMenuItem(id) { try {
  UnSelectMenu();
  document.getElementById("main-menu-underline").setAttribute("class", "selected");
  var cls = document.getElementById(id).getAttribute("class");
  cls+=" selected";
  document.getElementById(id).setAttribute("class", cls);
  document.getElementById("main-menu").selectedId = id;
} catch(e){ alert(e.message); } }

Event.add(window, 'load', OnLoad)
</script>

<script>

function OnPublishNotify(m)
{
  var mdiv = document.createElement("div");
  mdiv.setAttribute("id", m.identity);
  mdiv.setAttribute("class", "messenger");

  if ( m.content.category == "private-chat" )
  {
    var X = document.createElement("div");
    X.appendChild( document.createTextNode("X") );
    X.setAttribute("class", "X");
    var XW = document.createElement("div");
    XW.setAttribute("class", "XW");
    XW.appendChild( X );


    var head = document.createElement("div");
    head.setAttribute("class", "head");
    if ( m.content.picture )
    {
      mpic = document.createElement("img");
      mpic.setAttribute("src", m.content.picture);
      head.appendChild(mpic);
    }

    var body = document.createElement("div");
    body.setAttribute("class", "body");

    var header = document.createElement("span");
    header.setAttribute("class", "header");
    header.appendChild( document.createTextNode(m.content.head + " ") );

    var action = document.createElement("span");
    action.setAttribute("class", "action");
    if ( m.content.type == "message" )
      action.appendChild( document.createTextNode("отправил вам сообщение: ") );
    else
      action.appendChild( document.createTextNode("Приглашает вас в чат") );
    
    var content = document.createElement("span");
    content.setAttribute("class", "content");

    if ( m.content.text )
      content.appendChild( document.createTextNode(m.content.text) );
    
    var footer = document.createElement("span");
    footer.setAttribute("class", "footer");

    body.appendChild(header);
    body.appendChild(action);
    body.appendChild(content);
    body.appendChild(footer);

    mdiv.appendChild(XW);
    mdiv.appendChild(head);
    mdiv.appendChild(body);

    var oldDiv = document.getElementById(m.identity);

    if ( !oldDiv )
      document.getElementById("notifier").appendChild(mdiv);
    else
      document.getElementById("notifier").replaceChild(mdiv, oldDiv);
    
    Event.add(mdiv, "click", function() { launcher.exec("private-chat", m.content.params); });
  }
}

function CallbackNotify()
{
  var newChannel = "";

  if ( model.me && model.me.id ) newChannel = "faceonline.notifier." + model.me.id;
  else newChannel = "";

  if ( window.channelName == newChannel)
    return;

  if ( window.channelName )
  {
    comet.describe( window.channelName, OnPublish);
    comet.close( window.channelName );
  }

  window.channelName = newChannel;
    
  if ( window.channelName )
  {
    comet.subscribe( window.channelName, OnPublishNotify );
    comet.open( { channel: window.channelName } );
  }
}

</script>

</HEAD>

<body>
  <div id="main">
    <!-- <iframe id="me-frame" > </iframe> -->
    <div id="me-head" >
      <div id="me-wrap" >
        <div id="me-picture"></div>
        <div id="me-name"></div>
      </div>
    </div>
    <!--  <iframe id="event-frame" > </iframe> -->
    <div id="event-frame" > 
      <div id = "notifier"></div>
    </div>
    <!-- <iframe id="control-frame" > </iframe> -->
    <div id = "main-menu">
      <div id = "menu-item-online" class="menu-item">Где я</div>
      <div id = "menu-item-friends" class="menu-item">Друзья</div>
      <div id = "menu-item-contacts" class="menu-item">Конакты</div>
      <div id = "menu-item-chats" class="menu-item">Чаты</div>
      <div id = "menu-item-events" class="menu-item">Уведомления</div>
      <div id = "menu-item-more" class="menu-item">Еще</div>
    </div>
    <div id = "main-menu-underline"></div>
    <iframe id="common-frame" > </iframe>
  </div>
  <div class="events" >
    <div id="FaceonlineEvent"></div>
    <div id="event-income-sites">массив массивов 
      для http://code.google.com/chrome/extensions/extension.html#type-Port
      [
        [
          google.com,
          code.google.com,
          code.google.com/chrome/extensions/extension.html
        ]
      ]
      неее просто список страниц:
      [
        code.google.com/chrome/extensions/extension.html#type-Port
      ]
      
    </div>
  </div>
</body>
</HTML>
